<template>
  <div class="commonSearch">
    <el-select
      v-model="ruleForm.heatSourceId"
      placeholder="选择热源"
      clearable="true"
      @change="heatSourceChange"
    >
      <el-option
        v-for="(op, index) in SourceOptions"
        :key="index"
        :label="op.label"
        :value="op"
      />
    </el-select>
    <el-select
      v-model="ruleForm.heatStationId"
      placeholder="选择换热站"
      clearable="true"
      @change="heatStationChange"
    >
      <el-option
        v-for="(op, index) in StationOptions"
        :key="index"
        :label="op.label"
        :value="op"
      />
    </el-select>
    <el-select
      v-model="ruleForm.heatSystemId"
      placeholder="选择系统"
      clearable="true"
      @change="heatSystemChange"
    >
      <el-option
        v-for="(op, index) in SystemOptions"
        :key="index"
        :label="op.label"
        :value="op"
      />
    </el-select>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from "@vue/reactivity";
export default {
  setup() {
    const state = reactive({
      ruleForm: {
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
      },
      SourceOptions: [],
      StationOptions: [],
      SystemOptions: [],
    });

    const heatSourceChange = () => {};

    const heatStationChange = () => {};

    const heatSystemChange = () => {};

    return {
      ...toRefs(state),
      heatSourceChange,
      heatStationChange,
      heatSystemChange,
    };
  },
};
</script>
